<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        /* #data{
            color:red;
        } */
    </style>
</head>

<body>
    <label>考号</label>
    <p><input type="text" id="kh1">
        <input type="button" value="查询">
    </p>
    <p><br/>
    </p>
    <table width="200" border="1">
        <tr>
            <td>状况</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td id="zk1">&nbsp;</td>
            <td id="cj1">&nbsp;</td>
        </tr>
    </table>
    <p>&nbsp;</p>
    <div id="data" >
        <label>001</label><label>92</label><br>
        <label>002</label><label>56</label><br>
        <label>003</label><label>63</label><br>
        <label>004</label><label>87</label><br>
        <label>005</label><label>65</label><br>
        <label>006</label><label>57</label><br>
        <label>007</label><label>89</label><br>
        <label>008</label><label>48</label><br>
        <label>009</label><label>77</label><br>
        <label>010</label><label>66</label><br>
    </div>
   <script>
       let btn = document.querySelector("input[type=button]");
       btn.onclick = function(){
           let kh1 = document.getElementById("kh1");
           let labels = document.querySelectorAll("#data>label");
           for(let i = 0;i < labels.length;i++){
                if(labels[i].innerHTML == kh1.value){
                    let score = labels[i].nextSibling.innerHTML;
                    let level = "";
                    switch(parseInt(score / 10)){
                        case 9: level = "优秀";break;
                        case 8: level = "良好";break;
                        case 7: level = "中等";break;
                        case 6: level = "及格";break;
                        default : level = "不及格";
                    }
                    let zk = document.getElementById("zk1");
                    let cj = document.getElementById("cj1");
                    zk.innerHTML = level;
                    cj.innerHTML = score;
                }
           }
       }
   </script>
</body>

</html>
